<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>设置响应头</h3>
    <input type="text" name="" id="status">
    <br>
    <button onclick="setStatus()">提交</button>
    <h3>设置响应头</h3>
    <a href="response">设置</a>
    <hr>

    <h3>响应正文为简单的html</h3>
    <a href="html?type=1">查看</a>
    <h3>响应正文为复杂的html(动态变化的)</h3>
    <input type="text" id="username" placeholder="输入姓名">
    <br>
    <button onclick="toWelcome()">跳转</button>
    <hr>

    <h3>重定向</h3>
    <a href="goto?type=1">跳转</a>
    <h3>转发到hello.html</h3>
    <a href="goto?type=2">跳转</a>
    <hr>

    <h3>获取一个图片（渲染展示）</h3>
    <img src="file?type=photo&show=1" alt="">
    <h3>获取一个音乐（渲染展示）</h3>
    <audio src="file?type=music&show=1" controls></audio> <!---->

    <h3>获取一个图片（下载）</h3>
    <a href="file?type=photo&show=0">下载</a>
    <h3>获取一个音乐（下载）</h3>
    <a href="file?type=music&show=0">下载</a>

    <h3>获取ajax响应数据动态生成网页内容</h3>
    <button onclick="gen()">试试</button>
    <div id="content"></div>
</body>
<script>
    function setStatus(){
        //js中发请求：(1)ajax (2)直接修改url
        let status = document.querySelector("#status");
        //后端会设置这个文本框输入的值为响应状态码：严格来做需要验证（省略）
        window.location.href = "response?status="+status.value;//浏览器内置的window对象里面有一个location,表示地址栏对象，地址栏对象有一个href属性
    }
    function toWelcome(){
        let username = document.querySelector("#username");
        window.location.href = "html?type=2&username=" + username.value;
    }

    function gen(){
        let content = document.querySelector("#content");
        ajax({
            url:"ajax-response",
            method:"get",
            callback:function(status,resp){
                console.log(resp);//resp是一个字符串
                //[{"from":"旺财","to":"咪咪","info":"来吃小鱼干"},{"from":"旺财","to":"咪咪","info":"来吃小骨头"}]
                //转换为json对象
                let array = JSON.parse(resp);
                for(json of array){//开始遍历
                    //每一个json对象创建一个dom来保存信息
                    let p = document.createElement("p");
                    p.innerText = json.form + " 对 " + json.to + " 说： " + json.info;
                    content.appendChild(p);
                }
            }
        })
    }

    function ajax(args){//var ajax = function(){}
        let xhr = new XMLHttpRequest();
        // 设置回调函数
        xhr.onreadystatechange = function(){
            // 4: 客户端接收到响应后回调
            if(xhr.readyState == 4){
                // 回调函数可能需要使用响应的内容，作为传入参数
                args.callback(xhr.status, xhr.responseText);
            }
        }
        xhr.open(args.method, args.url);
        //如果args中，contentType属性有内容，就设置Content-Type请求头
        if(args.contentType){//js中，if判断，除了判断boolean值，还可以判断字符串，对象等，有值就为true
            xhr.setRequestHeader("Content-Type", args.contentType);
        }
        //如果args中，设置了body请求正文，调用send(body)
        if(args.body){
            xhr.send(args.body);
        }else{//如果没有设置，调用send()
            xhr.send();
        }
    }
</script>
</html>